import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
import { useDebounceFn } from '@vueuse/core';

export default function () {
  const 工具栏ref = ref('')
  const 工具栏class = ref('')
  const startScrollTop = ref(0)
  const 当前离顶 = ref(0)

  const scroll = useDebounceFn(() => {
    // console.log(`useDebounceFn ing👇`)
    let scrollTop = 滚动el.scrollTop
    当前离顶.value = scrollTop;

    if (scrollTop <= 50) {
      工具栏class.value = "复位显示";
      startScrollTop.value = scrollTop;
      return;
    }
    if (startScrollTop.value > scrollTop) {
      工具栏class.value = "复位显示";
    } else if (startScrollTop.value <= scrollTop) {
      工具栏class.value = "上移隐藏";
    }
    startScrollTop.value = scrollTop;
  }, 5);

  // let 滚动el
  const 顶部间距style = ref({})

  onMounted(() => {
    顶部间距style.value = { 'padding-top': `${工具栏ref.value.offsetHeight + 10}px` }
    // 滚动el = document.querySelector('.overflow-auto');
    // 滚动el.addEventListener("scroll", scroll);
  });

  // onBeforeUnmount(() => {
  //   滚动el.addEventListener("scroll", scroll);
  // });

  return {
    顶部间距style, 工具栏ref, 工具栏class
  }
}